<template>
  <div class="container">
    <div class="hearder">
      <div class="my-message">
        <div class="left">
          <div class="img"><img :src="userProfile.photo"></div>
          <div class="username">{{ userProfile.name }}</div>
        </div>
        <div
          class="right"
          @click="onUserMessage"
        >
          个人信息>
        </div>
      </div>
      <div class="user-data">
        <div>
          <p>{{ userProfile.art_count }}</p>
          <p>动态</p>
        </div>
        <div>
          <p>{{ userProfile.follow_count }}</p>
          <p>关注</p>
        </div>
        <div>
          <p>{{ userProfile.fans_count }}</p>
          <p>粉丝</p>
        </div>
        <div>
          <p>{{ userProfile.like_count }}</p>
          <p>被赞</p>
        </div>
      </div>
    </div>
    <div class="nav">
      <div>
        <div class="icon">
          <van-icon name="comment-o" />
        </div>
        消息通知
      </div>
      <div>
        <div class="icon">
          <van-icon name="like-o" />
        </div>
        我的收藏
      </div>
      <div>
        <div class="icon">
          <van-icon name="underway-o" />
        </div>
        阅读历史
      </div>
      <div>
        <div class="icon">
          <van-icon name="manager-o" />
        </div>
        我的作品
      </div>
    </div>
    <div class="serve-wrapper">
      <div class="more-serve">更多服务</div>
      <div class="buttom-serve">
        <div class="user-feedback">
          <div
            class="more-icon"
            @click="onFeedBack"
          >
            <van-icon name="question-o" />
            <div>用户反馈</div>
          </div>
        </div>
        <div class="xiaozhi">
          <div class="more-icon">
            <van-icon name="service-o" />
            <div>小智同学</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as userApi from '@/api/users';
export default {
  name: 'MinePage',
  data() {
    return {
      userProfile: '',
    };
  },

  methods: {
    onUserMessage() {
      this.$router.push('user-message');
    },
    onFeedBack() {
      this.$router.push('feedback');
    }
  },
  created() {
    userApi.getUserProfile()
      .then(res => {
        this.userProfile = res;
      })
      .catch((msg) => {
        this.$notify({
          message: msg,
        });
      })
  },
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f7f8fa;
  .hearder {
    width: 100%;
    height: 30%;
    background: linear-gradient(318deg,#b2b5db,#565482 70%,#494675);
    color: #fff;
    padding: 0 16px;
    box-sizing: border-box;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
    .my-message {
      padding: 50px 16px;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        .username {
          padding: 10px;
        }
        img {
          flex: 1;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: inline-block;
        }
      }
      .right {
        padding: 10px;
      }
    }
    .user-data {
     display: flex;
     justify-content: space-around;
     p {
       margin: 0;
       text-align: center;
     }

    }
  }
  .nav {
    width: 90%;
    padding: 28px 0;
    margin: 0 auto;
    background-color: white;
    display: flex;
    justify-content: space-around;
    border-radius: 8px;
    transform: translateY(-50%);
    padding: 24px 8px;
    .icon {
      text-align: center;
      box-sizing: content-box;
      padding: 8px;
    }
  }
  .serve-wrapper {
    width: 90%;
    margin: 0 auto;
    background-color: white;
    text-align: left;
    padding: 8px;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    transform: translateY(-30%);
    .more-serve {
      padding: 10px 8px;
    }
    .buttom-serve {
      padding: 16px 0;
      display: flex;
      .user-feedback,
      .xiaozhi {
        width: 25%;
        .more-icon {
          text-align: center;
        }
      }
    }
  }
}
</style>
